<!-- 单张图片上传 -->
<template>

  <el-upload :action="url" class="" 
  list-type="picture-card" accept=".jpeg, .jpg,.png,.mp4" v-model:file-list="fileList"
    drag multiple :on-success="successHandle" v-loading="zxczxtrtr" :before-upload="beforeUploadHandle" @remove="cxzvvrt" :on-change="selectFiles">
     <div class="h100 fz28 dfdsdsftt vertical-center">
      +
    </div> 
    <template #file="{ file }">
      <div v-if="kjxdd(file.url)">
          <video :src="file.url" class="w100 h100" autoplay  controls muted></video>
      </div>
      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" v-else />

      <span class="el-upload-list__item-actions">
       
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>


    </template>
  </el-upload>




  <!-- <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload> -->



</template>
<script lang='ts' setup>
import Upload from "@/views/oss/oss-upload.vue";
import { apiurl } from "@/utils/utils"
import { ref, nextTick } from "vue"
import { ElMessage } from "element-plus";
import { getToken } from "@/utils/cache";
let props = defineProps({
  dximg: { type: String },
});
const zxczxtrtr = ref(false)
const emit = defineEmits(["getimg"]);

const jmxdf = ref()
const fileList = ref([])
try{
  props.dximg.split(",").map(a=>{
    if(a){
      fileList.value.push({
    name:a,
    url:a
  })
    }

})
}catch(e){

}
const mxzcxzfds = ref()
const url = ref()
const kjxzcrf = ref([])
const beforeUploadHandle = (file: IObject) => {
  zxczxtrtr.value = true
}
const kjxdd = (data)=>{
  let jjdfs = false
  if(data.indexOf(".mp4")>=0){
    jjdfs = true
  }
  return jjdfs
}

url.value = `${apiurl}/sys/oss/upload?token=${getToken()}`;
const successHandle = (data) => {
  zxczxtrtr.value = false
  console.log(data);
  fileList.value[fileList.value.length-1].url = data.data.src
  emit("getimg", fileList.value);
}
const selectFiles = (data)=>{
 
}
const cxzvvrt = (data)=>{

}
const handleRemove = (file: UploadFile) => {
  console.log(file)
  console.log('8888888');
  fileList.value.map((a,b)=>{
    console.log(a.name,file.name);
    if(a.name==file.name){
      fileList.value.splice(b,1)
    }
  })
  emit("getimg", fileList.value);
}
</script>
<style scoped>
  .dfdsdsftt{
    height: 64px;
  }
</style>